<template>
    <div>
        <!--查询条件部分  searchmap -->
        <el-form ref="form" :inline="true" label-width="80px">
            <el-form-item label="线索内容:">
                <el-input v-model="searchMap.content" placeholder="线索内容"></el-input>
            </el-form-item>
            <el-form-item label="省市区:">
                <el-select v-model="searchMap.sheng" @change="handleshengChange" placeholder="请选择省" clearable  size="10">
                    <el-option
                            v-for="item in shengList"
                            :key="item.id"
                            :label="item.pname"
                            :value="item.id" >
                    </el-option>
                </el-select>
                <el-select v-model="searchMap.shi" @change="handleshiChange" placeholder="请选择市" clearable  size="10">
                    <el-option
                            v-for="item in shiList"
                            :key="item.id"
                            :label="item.pname"
                            :value="item.id" change="getssq(item.id,3)">
                    </el-option>
                </el-select>
                <el-select v-model="searchMap.qu" placeholder="请选择区" clearable  size="10">
                    <el-option
                            v-for="item in quList"
                            :key="item.id"
                            :label="item.pname"
                            :value="item.id" >
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="fetchData()">查询</el-button>
                <el-button type="primary" @click="add()">新增</el-button>
            </el-form-item>
        </el-form>

        <!--table 展示区-->
        <template>
            <el-table
                    :data="tableData"
                    border style="width: 100%">
                <el-table-column
                        prop="id"
                        label="id"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="xnum"
                        label="线索编号"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="xcontent"
                        label="线索内容"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="sname"
                        label="线索来源"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="pcq"
                        label="省市区"
                        width="100" >
                </el-table-column>
                <el-table-column
                        prop="person"
                        label="反映人"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="审核状态"
                        width="180" :formatter="statusFormat">
                </el-table-column>

                <el-table-column
                        label="操作">
                    <template slot-scope="scope">    
                        <el-button  @click="dele(scope.row.id)" type="text" size="small">删除</el-button> 
                        <el-button  @click="shenhe(scope.row)" type="text" size="small">审核</el-button>
                        <el-button  @click="banli(scope.row)" type="text" size="small">办结</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>

        <div class="pagination-container">
            <!--分页插件 -->
            <el-pagination
                    class="pagiantion"
                    @size-change="sizeChange"
                    @current-change="fetchData"
                    :current-page.sync="searchMap.pageNum"
                    :page-sizes="[2, 4, 6, 8]"
                    :page-size="searchMap.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <!--新增、修改编辑框-->
        <el-dialog
                title="编辑"
                :visible.sync="dialogVisible"
                width="50%">
                        <span>
                            <el-form ref="form"  label-width="100px">
                                <el-input v-model="pojo.id" type="hidden"></el-input>
                                <el-form-item label="线索编号">
                                    <el-input v-model="pojo.xnum" placeholder="线索编号" @input="onInput()"></el-input>
                                </el-form-item>
                                <el-form-item label="线索内容">
                                    <el-input v-model="pojo.xcontent"  placeholder="线索内容" @input="onInput()"></el-input>
                                </el-form-item>
                                <el-form-item label="线索来源">
                                     <el-select v-model="pojo.xsource" placeholder="请选择来源" clearable  size="10">
                                        <el-option
                                                v-for="item in sourceList"
                                                :key="item.id"
                                                :label="item.sname"
                                                :value="item.id" >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="省市区">
                                    <el-select v-model="pojo.province" @change="handleshengChange" placeholder="请选择省" clearable  size="10">
                                        <el-option
                                                v-for="item in shengList"
                                                :key="item.id"
                                                :label="item.pname"
                                                :value="item.id" >
                                        </el-option>
                                    </el-select>
                                    <el-select v-model="pojo.city" @change="handleshiChange" placeholder="请选择市" clearable  size="10">
                                        <el-option
                                                v-for="item in shiList"
                                                :key="item.id"
                                                :label="item.pname"
                                                :value="item.id" change="getssq(item.id,3)">
                                        </el-option>
                                    </el-select>
                                    <el-select v-model="pojo.qu" placeholder="请选择区" clearable  size="10">
                                        <el-option
                                                v-for="item in quList"
                                                :key="item.id"
                                                :label="item.pname"
                                                :value="item.id" >
                                        </el-option>
                                    </el-select>
                                </el-form-item>

                               <!-- <el-form-item label="时间">
                                    <el-date-picker
                                            v-model="pojo.createtime"
                                            type="date" @input="onInput()"
                                            placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>-->
                            </el-form>
                        </span>
            <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="save()">保 存</el-button>
                        </span>
        </el-dialog>

        <!--审核编辑框-->
        <el-dialog
                title="审核"
                :visible.sync="shenhe_dialogVisible"
                width="50%">
                        <span>
                            <el-form ref="form"  label-width="100px">
                                <el-input v-model="shenhepojo.id" type="hidden"></el-input>
                                <el-form-item label="拒绝理由">
                                    <el-input v-model="shenhepojo.liyou" placeholder="拒绝理由" @input="onInput()"></el-input>
                                </el-form-item>
                            </el-form>
                        </span>
                        <span slot="footer" class="dialog-footer">
                            <el-button  type="primary" @click="shenheMethod(1)">审核通过</el-button>
                            <el-button  @click="shenheMethod(2)">审核拒绝</el-button>
                        </span>
        </el-dialog>

        <!--办结编辑框-->
        <el-dialog
                title="办理"
                :visible.sync="banli_dialogVisible"
                width="50%">
                        <span>
                            <el-form ref="form"  label-width="100px">
                                <el-input v-model="banjiepojo.id" type="hidden"></el-input>
                                <el-input v-model="banjiepojo.xiansuoStatus" ></el-input>
                                <el-form-item label="基本案情:">
                                    <el-input v-model="banjiepojo.xname" placeholder="线索名称" @input="onInput()"></el-input>
                                </el-form-item>
                                <el-form-item label="核处结论:">
                                    <el-radio v-model="banjiepojo.jl" v-for="item in sourceList" :label="item.id">{{item.name}}</el-radio>

                                    <!--<el-radio v-model="banjiepojo.jl" label="1">经核实存在欠薪，已支付完毕</el-radio>
                                    <el-radio v-model="banjiepojo.jl" label="2">尚未支付，准备或已申请法院强制执行</el-radio>
                                    <el-radio v-model="banjiepojo.jl" label="3">尚未支付，涉嫌犯罪，已移送公安机关</el-radio>
                                    <el-radio v-model="banjiepojo.jl" label="4">已支付欠款或达成还款协议</el-radio>
                                    <el-radio v-model="banjiepojo.jl" label="5">应当或者已经通过劳动争议仲裁解决，已告知反映人</el-radio>
                                    <el-radio v-model="banjiepojo.jl" label="6">经核实不存在欠薪情况</el-radio>-->
                                </el-form-item>
                                <el-form-item label=" 是否办结:">
                                    <el-radio v-model="banjiepojo.status" label="0">未办结</el-radio>
                                    <el-radio v-model="banjiepojo.status" label="1">已办结</el-radio>
                                </el-form-item>
                                 <el-form-item label="办结时间:">
                                    <el-date-picker
                                            v-model="banjiepojo.createtime"
                                            type="date" @input="onInput()"
                                            placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-form>
                        </span>
            <span slot="footer" class="dialog-footer">
                            <el-button  type="primary" @click="banlisave(banjiepojo.id,banjiepojo.xiansuoStatus)">保存</el-button>
                            <el-button  @click="banli_dialogVisible = false">取消</el-button>
                        </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "list",
        data(){
            return{
                tableData:[],
                total: 10,
                searchMap:{
                    pageNum:1,
                    size: 2
                },
                dialogVisible :false,
                pojo:{},
                shenhe_dialogVisible:false,
                shenhepojo:{
                    liyou:""
                },
                banli_dialogVisible:false,
                banjiepojo:{

                },
                shengList:[],
                shiList:[],
                quList:[],
                sourceList:[],
                resultList:[]
            }
        },
        created(){
            this.fetchData();
            this.getssq(0,1,'s');
        },
        methods:{

            //省下拉框选择后级联操作
            handleshengChange(value){
              this.shiList =[];
              this.quList=[];
              this.getssq(value,2,'i')
            },
            //市下拉框选择后级联操作
            handleshiChange(value){
                this.quList=[];
                this.getssq(value,3,'q')
            },
            //向后台发起请求，去查询省市区级联，每次查询一级
            getssq(parentId,rank,v){
                //异步查询省市区
                const that=this;
                this.axios.get("/api/api/v1/xiansuo/pro?parentId="+parentId+"&rank="+rank).then(function (resp) {
                    if(v=='s'){
                        that.shengList = resp.data;
                    }else if(v=='i'){
                        that.shiList = resp.data;
                    }else if(v=='q'){
                        that.quList = resp.data;
                    }

                })

            },
            //弹出审核框
            shenhe(row){
                //打开框
                this.shenhe_dialogVisible =true;
                this.shenhepojo.id = row.id;
            },
            //处理审核方法  审核通过 和审核拒绝 都走同一个方法
            shenheMethod(v){
              if(v==2){
                  //审核失败，校验不能为空
                  if(this.shenhepojo.liyou==""){
                      this.$alert("拒绝理由不能为空");
                      return;
                  }
              }
                //请求去修改线索状态
                this.shenhepojo.status = v;
                const that=this;
                this.axios.post("/api/api/v1/xiansuo/shenhe",this.shenhepojo).then(function (resp) {
                    if(resp.data.code == -1){
                        this.$router.push("login")
                    }else{
                        that.shenhe_dialogVisible =false;
                        that.fetchData();
                    }
                })
            },

            //办结处理方法
            banlisave(id,xiansuoStatus){
                //0 审核中  1 审核通过  2 审核拒绝
              if(xiansuoStatus==2||xiansuoStatus==0){
                  this.$alert("只有审核通过的线索可以处理办结！");
                  return;
              }else{
                  const that=this;
                  this.axios.post("/api/api/v1/xiansuo/banjie",this.banjiepojo).then(function (resp) {
                      if(resp.data.code == -1){
                          this.$router.push("login")
                      }else{
                          that.banli_dialogVisible =false;
                          that.fetchData();
                      }
                  })
              }
            },
            //弹出办结 框
            banli(v){
                //打开框
                this.banli_dialogVisible =true;
                this.banjiepojo={};
                //发起请求去后台动态获取选择项数据
                const that=this;
                this.axios.post("/api/api/v1/result/list").then(function (resp) {
                    that.sourceList =resp.data;
                })
                this.banjiepojo.id =v.id;
                this.banjiepojo.xname =v.xcontent;
                this.banjiepojo.xiansuoStatus =v.status;

            },

            //分页中自定义页码方法
            sizeChange(v){
                this.searchMap.size = v;
                this.fetchData();
            },

            //查询列表方法
            fetchData(){
                const that=this;
                this.axios.post("/api/api/v1/xiansuo/list",this.searchMap).then(function (resp) {
                    if(resp.data.code == -1){
                        this.$router.push("login")
                    }else{
                        that.tableData = resp.data.data.list;
                        that.total = resp.data.data.total;
                    }
                })
            },
            save(){
                const that =this;
                this.axios.post( "/api/api/v1/xiansuo/save",this.pojo).then(res=>{
                    if(res.data.code == -1){
                        this.$router.push("login")
                    }else{
                        that.dialogVisible =false;
                        that.fetchData();
                    }

                })
            },

            //修改时弹框赋值地方
            edit(row){
                //打开框
                this.dialogVisible =true;
                //置空
                this.pojo={};
                this.pojo.id = row.id;
                this.pojo.username = row.username;
                this.pojo.password = row.password;
                this.pojo.age = row.age;
                this.pojo.createtime = row.createtime;
                //根据id查询对象  回显
                //this.axios.get( "/api/findById/"+id).then(res=>{
                //    this.pojo = res.data;
                //})
            },

            //删除方法
            dele(id){
                this.$confirm('确定要删除该线索?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then( () => {
                    const that=this;
                    this.axios.get( "/api/api/v1/xiansuo/deleteById?id="+id).then(response => {
                        if(response.data.code==0){
                            that.fetchData (); //刷新列表
                        }else if(response.data.code==3000){
                            this.$alert("只能删除审核中的线索数据");
                        }else{
                            if(response.data.code==-1){
                                this.$router.push("login")
                            }else{
                                this.$alert(response.data.errorMessage);
                            }
                        }
                    })
                })
            },

            //新增方法
            add(){
                this.dialogVisible=true;
                this.pojo={};
                //查询数据来源
                this.axios.post( "/api/source/list").then(response => {
                    this.sourceList = response.data;
                })
            },


            //处理文本框只读不能编辑的处理方法
            onInput(){
                this.$forceUpdate()
            },

            //状态转换方法
            statusFormat(row){
                if(row.status==0){
                    return '审核中';
                }else if(row.status==1){
                    return '审核通过';
                }else if(row.status==2){
                    return '审核拒绝';
                }
            },

            //列表中日期格式化方法
            timeFormat(row, column) {
                //日期格式化
                let datac = row[column.property];
                var time = new Date(datac);
                var year = time.getFullYear()
                var month = time.getMonth() + 1
                var date = time.getDate()
                var hours = time.getHours()
                var minutes = time.getMinutes()
                var seconds = time.getSeconds()

                function add0(m) {
                    return m < 10 ? '0' + m : m
                }

                var startTime = add0(year) + '-' + add0(month) + '-' + add0(date) + ' ' + add0(hours) + ':' + add0(minutes) + ':' + add0(seconds)
                return startTime
            },
        }
    }
</script>

<style scoped>

</style>
